<template>
    <div v-if="screenWidth > 769" class="footer">
        <div class="box1">
            <div class="footer-section1">
                <div class="footer-title"><span>销售咨询电话</span></div>
                <div class="footer-content">
                    <template v-for="(phoneGroup, index) in groupedSalesPhones" :key="index">
                        <p v-if="phoneGroup.type"
                            v-html="`${phoneGroup.type}:&nbsp;&nbsp;${phoneGroup.numbers.join('<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;')}`">
                        </p>
                        <p v-else v-html="phoneGroup.numbers.join('<br>')"></p>
                    </template>
                </div>
            </div>
            <div class="footer-section2">
                <div class="footer-title"><span>体验馆</span></div>
                <div class="footer-content2">
                    <template v-for="museum in museums" :key="museum.id">
                        <p>{{ museum.content }}</p>
                    </template>
                </div>
            </div>
            <div class="footer-section3">
                <div class="footer-title"><span>子公司</span></div>
                <a class="footer-link" v-for="subCompany in subCompanies" :key="subCompany.id"
                    :href="subCompany.content">{{
                        subCompany.content }}</a>
            </div>
        </div>
        <div class="box2">
            <template v-for="(item, index) in config" :key="index">
                <template v-if="item.key === 'copyright'">
                    <span class="box2-span">{{ item.values }}</span>
                </template>
                <template v-else-if="item.key === 'record'">
                    <a class="box2-span" href="https://beian.miit.gov.cn/" target="_blank">{{ item.values }}</a>
                </template>
            </template>
        </div>
    </div>
    <div v-if="screenWidth <= 768" class="footer">
        <div class="box1">
            <div class="footer-section1">
                <div class="footer-title"><span>销售咨询电话</span></div>
                <div class="footer-content">
                    <template v-for="(phoneGroup, index) in groupedSalesPhones" :key="index">
                        <p v-if="phoneGroup.type"
                            v-html="`${phoneGroup.type}:&nbsp;&nbsp;${phoneGroup.numbers.join('<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;')}`">
                        </p>
                        <p v-else v-html="phoneGroup.numbers.join('<br>')"></p>
                    </template>
                </div>
            </div>
            <div class="footer-section2">
                <div class="footer-title"><span>体验馆</span></div>
                <div class="footer-content2">
                    <template v-for="museum in museums" :key="museum.id">
                        <p>{{ museum.content }}</p>
                    </template>
                </div>
            </div>
            <div class="footer-section3">
                <div class="footer-title"><span>子公司</span></div>
                <a class="footer-link" v-for="subCompany in subCompanies" :key="subCompany.id"
                    :href="subCompany.content">{{
                        subCompany.content }}</a>
            </div>
        </div>
        <div class="box2">
            <template v-for="(item, index) in config" :key="index">
                <template v-if="item.key === 'copyright'">
                    <span class="box2-span">{{ item.values }}</span>
                </template>
                <template v-else-if="item.key === 'record'">
                    <a class="box2-span" href="https://beian.miit.gov.cn/" target="_blank">{{ item.values }}</a>
                </template>
            </template>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { getFooterInfo, getConfig } from '@/api/footer.js';

const salesPhones = ref([]);
const email = ref('');
const museums = ref([]);
const subCompanies = ref([]);
const config = ref([]);

// 响应式数据，用于存储屏幕宽度
const screenWidth = ref(window.innerWidth);

// 监听屏幕尺寸变化，更新屏幕宽度数据
const updateScreenWidth = () => {
    screenWidth.value = window.innerWidth;
};
window.addEventListener('resize', updateScreenWidth);

onMounted(() => {
    screenWidth.value = window.innerWidth;
    getFooterInfo().then(res => {
        salesPhones.value = res.data.sales;
        email.value = res.data.email;
        museums.value = res.data.museums;
        subCompanies.value = res.data.subCompanies;
    });

    getConfig().then(res => {
        config.value = res.data;
    });
});


const groupedSalesPhones = computed(() => {
    const grouped = [];
    let currentType = null;
    let currentNumbers = [];

    salesPhones.value.forEach(phone => {
        if (phone.type !== currentType) {
            if (currentType) {
                grouped.push({ type: currentType, numbers: currentNumbers });
            }
            currentType = phone.type;
            currentNumbers = [phone.content];
        } else {
            currentNumbers.push(phone.content);
        }
    });

    if (currentType) {
        grouped.push({ type: currentType, numbers: currentNumbers });
    }
    return grouped;
});
</script>

<style scoped>
@media screen and (min-width: 1025px) {
    .footer-link {
        margin-top: 15px;
        color: #609ee9;
    }

    .box2-span {
        font-size: 14px;
        color: #dddddd;
        margin-bottom: 10px;
        @apply px-1.5rem;
    }

    p {
        font-size: 18px;
        word-wrap: break-word;
        color: #ffffff;
        line-height: 2;
        white-space: pre;
    }

    .footer-content2 {
        text-align: center;
    }

    .footer-content {
        text-align: left;
    }

    .footer {
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 100%;
        padding: 0 150px;
        flex-direction: column;
    }

    .box1 {
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: center;
        align-items: flex-start;
        margin-bottom: 20px;
    }

    .box2 {
        margin-top: 50px;
        margin-bottom: 20px;
    }

    .footer-section1 {
        display: flex;
        align-content: center;
        justify-content: center;
        flex-direction: column;
        font-size: 18px;
        color: white;
        position: relative;
        align-items: flex-start;
        width: 18rem;
    }

    .copyright {
        font-size: 12px;
        color: #dddddd;
        width: 18rem;
    }

    .footer-phone-group {
        height: 30px;
    }

    .footer-content {
        height: 5px;
    }

    .footer-section2 {
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: relative;
        color: white;
        width: 18rem;
    }

    .footer-section3 {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 18rem;
    }

    .copyright3 {
        font-size: 12px;
        color: #dddddd;
    }

    .footer-title {
        color: red;
        margin-bottom: 10px;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        line-height: 3;
        padding: 0 50px;
    }

    .footer-bottom {
        margin-top: 20px;
        text-align: center;
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .footer-link {
        margin-top: 15px;
        color: #609ee9;
    }

    .footer {
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: center;
        align-items: flex-start;
        position: relative;
        padding: 0 100px;
    }

    .footer-section1 {
        width: 700px;
        margin-left: 100px;
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
        font-size: 18px;
        color: white;
        position: relative;
    }

    .copyright {
        font-size: 12px;
        color: #dddddd;
        position: absolute;
        bottom: -140px;
    }

    .footer-link {
        margin-top: 15px;
        color: #609ee9;
    }

    .box2-span {
        font-size: 14px;
        color: #dddddd;
        margin-bottom: 10px;
        @apply px-1.5rem;
    }

    p {
        font-size: 18px;
        word-wrap: break-word;
        color: #ffffff;
        line-height: 2;
        white-space: pre;
    }

    .footer-content2 {
        text-align: center;
    }

    .footer-content {
        text-align: left;
    }

    .footer {
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 100%;
        padding: 0 150px;
        flex-direction: column;
    }

    .box1 {
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: center;
        align-items: flex-start;
        margin-bottom: 20px;
    }

    .box2 {
        margin-top: 50px;
        margin-bottom: 20px;
    }

    .footer-section1 {
        display: flex;
        align-content: center;
        justify-content: center;
        flex-direction: column;
        font-size: 18px;
        color: white;
        position: relative;
        align-items: flex-start;
        width: 18rem;
    }

    .copyright {
        font-size: 12px;
        color: #dddddd;
        width: 18rem;
    }

    .footer-phone-group {
        height: 30px;
    }

    .footer-content {
        height: 5px;
    }

    .footer-section2 {
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: relative;
        color: white;
        width: 18rem;
    }

    .footer-section3 {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 18rem;
    }

    .copyright3 {
        font-size: 12px;
        color: #dddddd;
        position: absolute;
    }

    .footer-title {
        color: red;
        margin-bottom: 10px;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        line-height: 3;
        padding: 0 50px;
    }

    .footer-bottom {
        margin-top: 20px;
        text-align: center;
    }
}

@media screen and (max-width: 768px) {
    p {
        font-size: 18px;
        word-wrap: break-word;
        color: #ffffff;
        line-height: 2;
        white-space: pre;
    }

    .footer-link {
        margin-top: 15px;
        color: #609ee9;
    }

    .copyright {
        font-size: 12px;
        color: #dddddd;
    }

    .footer {
        display: flex;
        position: relative;
        align-items: center;
        width: 100%;
        padding: 0 150px;
        flex-direction: column;
    }

    .box1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        align-content: center;
    }

    .footer-section1,
    .footer-section2,
    .footer-section3 {
        display: flex;
        flex-direction: column;
    }

    .footer-title {
        color: red;
        margin: 10px auto;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        line-height: 3;
    }

    .footer-bottom {
        margin-top: 20px;
        text-align: center;
    }

    .footer-content2 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .box2-span {
        font-size: 14px;
        color: #dddddd;
        margin-bottom: 10px;
    }

    .box2 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-content: center;
        width: 340px;
        margin-top: 50px;
    }
}
</style>